<template>
  <view class="w-full max-w-[750rpx] mx-auto mt-[30rpx]">
    <!-- 头部信息 -->
    <view class="flex items-center justify-between bg-gray-100 p-[20rpx]">
      <text class="text-[30rpx] font-bold">健康档案</text>
    </view>

    <!-- 用户信息 -->
    <view class="p-[20rpx]">
      <!-- 功能按钮区域 -->
      <view class="grid grid-cols-4 gap-[20rpx] mt-[20rpx]">
        <view class="flex flex-col items-center" @click="navigateTo(item)" v-for="item in list" :key="item.page">
          <view class="w-[100rpx] h-[100rpx] bg-[#27c32e] rounded-full flex items-center justify-center">
            <IconFont font-class-name="iconfont" class-prefix="icon" :name="item.icon" size="36" :color="item.color" />
          </view>
          <text class="w-[90rpx] mt-[10rpx] text-[22rpx] text-center text-gray-500">{{
            item.name
            }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'

const list = [
  { name: '个人健康标识', icon: 'yiliao3', page: '1', color: '#fff' },
  { name: '个人基本健康信息', icon: '-yiliao-xieye', page: '2', color: '#fff' },
  { name: '既往病史', icon: 'jilu1', page: '3', color: '#fff' },
  { name: '接种与筛查记录', icon: 'bingfang', page: '4', color: '#fff' },
  { name: '健康体检', icon: 'yiliao', page: '5', color: '#fff' },
  { name: '生活方式与习惯', icon: 'liulanjilu', page: '6', color: '#fff' },
  { name: '重要生活事件', icon: 'bingli', page: '7', color: '#fff' },
  { name: '健康教育与宣传', icon: 'baojian', page: '8', color: '#fff' },
  {
    name: '参加的健康教育活动',
    icon: 'yundongjianshenyixiang',
    page: '9',
    color: '#fff',
  },
  { name: '获得的健康宣传资料', icon: 'a-jilu2', page: '10', color: '#fff' },
  { name: '健康调查问卷', icon: 'wentijilu', page: '11', color: '#fff' },
  { name: '设备列表', icon: 'xianweijing', page: '12', color: '#fff' },
]

// 定义导航函数
const navigateTo = page => {
  if (page.name === '个人健康标识') {
    Taro.navigateTo({
      // url: `/package-other/health/pages/my-tag`,
      url: `/pinggu/marks/my-tag`,
    })
    return
  } 
  if (page.name === '个人基本健康信息') {
    Taro.navigateTo({
      // url: `/package-card/info/index/index`,
      url: `/pages/index/all`,
    })
    return
  }
  if (page.name === '既往病史') {
    Taro.navigateTo({
      // url: `/package-card/historys/index/index`,
      // url: `/pages/historys/index/index`,
      url: `/pages/historys/past-medical/list`,
    })
    return
  }
  // if (page.name === '接种与筛查记录') {
  //   Taro.navigateTo({
  //     url: `/package-other/health/web`,
  //   })
  //   return
  // }
  // if (page.name === '健康体检') {
  //   Taro.navigateTo({
  //       url: `/package-other/health/pages/comm?page=${page.name}`,
  //   })
  // }
  Taro.showToast({
    title: '开发中',
    icon: 'none',
  })
  
}
</script>

<style>
/* 如果需要额外的样式可以在这里添加 */
</style>
